<template>
  <fieldset>
    <legend>计数器</legend>
    <button @click="INCREASE(1)">+</button>
    &nbsp;
    <b>{{ $store.state.money }}</b>
    &nbsp;
    <button @click="DECREASE(1)">-</button>
    <h1>{{ name }}</h1>
    <h1>{{ reverseNickname }}</h1>
  </fieldset>
</template>


<script>
// state可以通过辅助函数进行映射
// 映射就是让组件直接拿到 state 中的 数据
import { mapState, mapMutations, mapGetters } from "vuex";
// 一般放在组件的 computed属性中
export default {
  computed: {
    ...mapState(["name"]),
    // getters运算也是一种结果，和state一样写到 computed 中
    ...mapGetters(["reverseNickname"])
  },
  methods: {
    // mutation 一般都映射在 methods
    ...mapMutations(["INCREASE", "DECREASE"]),
    // increase(){
    //     // 触发 mutation 需要使用 commit 提交
    //     // commit 第一个参数是 mutation 类型 第二个是荷载的值 payload
    //     this.$store.commit("INCREASE",10)
    // },
    // decrease(){
    //     this.$store.commit("DECREASE",11)
    // }
  },
};
</script>